<template>
  <div class="content">
    <div class="header">
      <h1>这是页眉</h1>
    </div>

    <div class="main-content">
      <Foreword />
      <Catalogue />
      <BasicInfo />
      <!-- 这里是你的长内容，可能会分页 -->
    </div>

    <div class="footer">
      <p>页脚内容 - 页脚会出现在每一页</p>
    </div>
  </div>
</template>

<script setup >
import Foreword from "./components/foreword.vue";
import Catalogue from "./components/catalogue.vue";
import BasicInfo from "./components/basicInfo.vue";
</script>

<style scoped>
/* 普通样式 */
.content {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  font-size: 24px;
}

.main-content {
  font-size: 16px;
  line-height: 1.6;
}

.footer {
  text-align: center;
  font-size: 14px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* 打印时样式 */
@media print {
  /* 页面打印样式 */
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  .content {
    page-break-before: always; /* 确保每次打印从新的一页开始 */
  }

  /* 页眉和页脚 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 24px;
    background: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    background: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
  }

  /* 让页面内容不会被页眉和页脚遮挡 */
  .main-content {
    margin-top: 60px; /* 这里设置一个适当的高度 */
    margin-bottom: 60px; /* 这里设置页脚的高度 */
  }

  /* 页脚内容保持每一页都有 */
  .footer::before {
    content: "第 " counter(page) " 页"; /* 自动生成页码 */
  }

  /* 用 @page 设置页码 */
  @page {
    margin-top: 80px; /* 设置页眉和页脚的空间 */
    margin-bottom: 80px;
  }
}
</style>
